<template>
	<div>
		<sui-button @click.native="toggle">Show Modal</sui-button>
		<sui-modal v-model="open">
			<sui-modal-header>Select a Photo</sui-modal-header>
			<sui-modal-content style="display: inline-grid">
				<zui-step :steps="steps" style="margin-bottom:10px" />
				<sui-modal-description v-for="step in steps">
					<slot v-bind:step="step">
						<sui-form class="z-center" v-if="step.active" size="small">
							<sui-form-field inline>
								<label>* {{step.title}}</label>
								<input placeholder="First Name">
							</sui-form-field>
							<sui-form-field inline>
								<label>{{step.title}}</label>
								<input placeholder="First Name">
							</sui-form-field>
						</sui-form>
					</slot>
				</sui-modal-description>
			</sui-modal-content>
			<sui-modal-actions>
				<sui-menu secondary>
					<sui-menu-item :style="{display:currentIndex<=0?'none':'block'}" active link @click.native="onPrevious">
						上一步
					</sui-menu-item>
					<sui-menu-item position="right" style="padding-top:1px;padding-bottom:1px">
						<sui-menu-item positive active link @click.native="toggle">
							取消
						</sui-menu-item color="blue">
						<sui-menu-item :style="{display:currentIndex==(steps.length-1)?'block':'none'}" active link @click.native="onHandle">
							完成
						</sui-menu-item>
						<sui-menu-item :style="{display:currentIndex>=(steps.length-1)?'none':'block'}" active link @click.native="onNext">
							下一步
						</sui-menu-item>
					</sui-menu-item>
				</sui-menu>
			</sui-modal-actions>
		</sui-modal>
	</div>
</template>
<script>
import ZuiStep from "./ZuiStep.vue";
export default {
  name: "zui-step-modal",
  components: {
    ZuiStep
  },
  props: {
    steps: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      open: false,
      currentIndex: 0
    };
  },
  methods: {
    onHandle() {
      alert("Hanler");
    },
    onNext() {
      this.steps[this.currentIndex].completed = true;
      this.steps[this.currentIndex].active = false;
      this.currentIndex = this.currentIndex + 1;
      this.steps[this.currentIndex].active = true;
      this.steps[this.currentIndex].disabled = false;
      console.log(this.currentIndex + 1);
    },
    onPrevious() {
      this.steps[this.currentIndex].active = false;
      this.steps[this.currentIndex].disabled = true;
      this.currentIndex = this.currentIndex - 1;
      this.steps[this.currentIndex].completed = false;
      this.steps[this.currentIndex].active = true;
      console.log(this.currentIndex + 1);
    },
    toggle() {
      this.open = !this.open;
    }
  }
};
</script>
<style lang="scss">
.z-center {
  margin: auto;
  width: 40%;
  padding: 10px;
}
</style>
